<template>
    <div>
        <div class="top">
            <div
                style="display: flex;justify-content: space-between;align-items: center;padding: 20px 0;width: 1000px;margin: 0 auto;">
                <span class="nav-itme gradient-text" @click="navigatorTo('/', -1)">装备质量论坛</span>
                <span class="nav-itme" style="font-size:16px;color: #000;font-weight: 400;">
                    {{ date }}
                </span>
            </div>
        </div>
        <div style="width: 100%;background-color: #006400;">
            <div style="width: 1000px;margin: 0 auto;">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <span class="nav-itme" style="padding: 15px  0;flex: 1;display: flex;
    justify-content: center;
    align-items: center;" @click="navigatorTo('/', -1)" :class="[currentActive === -1 ? 'active-nav' : '']">
                        <img style="height: 18px;width: 18px;margin-right: 10px;" src="@/assets/shouye.png"
                            fit="cover" />
                        首页
                    </span>
                    <span class="nav-itme" style="padding: 15px  0;flex: 1;display: flex;
    justify-content: center; 
    align-items: center;" @click="navigatorTo('/publicize/index', 1)"
                        :class="[currentActive === 1 ? 'active-nav' : '']">
                        <img style="height: 18px;width: 18px;margin-right: 10px;" src="@/assets/zixun.png"
                            fit="cover" />
                        咨询动态
                    </span>
                    <span class="nav-itme" style="padding: 15px  0;flex: 1;display: flex;
    justify-content: center;
    align-items: center;" @click="navigatorTo('/information/index', 2)"
                        :class="[currentActive === 2 ? 'active-nav' : '']">
                        <img style="height: 18px;width: 18px;margin-right: 10px;" src="@/assets/ziliao.png"
                            fit="cover" />
                        资料专区
                    </span>
                    <span class="nav-itme" style="padding: 15px  0;flex: 1;display: flex;
    justify-content: center;
    align-items: center;" @click="navigatorTo('/notice/index', 3)" :class="[currentActive === 3 ? 'active-nav' : '']">
                        <img style="height: 18px;width: 18px;margin-right: 10px;" src="@/assets/notice.png"
                            fit="cover" />
                        系统公告
                    </span>
                    <span class="nav-itme" style="padding: 15px  0;flex: 1;display: flex;
    justify-content: center;
    align-items: center;" @click="gotoForum">
                        <img style="height: 18px;width: 18px;margin-right: 10px;" src="@/assets/luntan.png"
                            fit="cover" />
                        交流论坛
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "XjTop",
    data() {
        return {
            // 选中菜单
            activeIndex: 'second',
            list: [],
            currentActive: 1,
            date: "",
        }
    },
    methods: {
        gotoForum() {
            this.crud.get("/index-article/index/content/v2").then(res => {
                window.open(res.data.data.bbsUrl, '_blank');
            })
        },
        navigatorTo(path, n) {
            if (n === this.currentActive) return;
            this.currentActive = n
            this.$router.push(path)
        }
    },
    created() {

        this.userData = JSON.parse(sessionStorage.getItem("userData"))
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1; // 月份从 0 开始，所以要加 1
        const day = now.getDate();
        const daysOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        const dayOfWeek = daysOfWeek[now.getDay()];
        this.date = `${year}年${month}月${day}日 ${dayOfWeek}`;
    },
    mounted() {
        this.currentActive = +location.href.split('/').at(-1) || -1;
    },
}
</script>

<style scoped>
/* 功能靠右  */
.el-menu {
    float: right;
    margin-right: 0%;
}

a {
    text-decoration: none !important;
    /* 去掉下划线 */
}


/* 二级菜单a连接导致颜色错误修正 */
.funTwo {
    color: #85888E;
}

.funTwo:hover {
    color: #303133;
}

.active-nav {
    font-weight: 700;
    color: #fff !important;
    background-color: #2b7926;
}

.nav-itme {
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 0px 10px;
}

.nav-itme:hover {
    color: #fff
}

.gradient-text {
    font-size: 35px;
    font-weight: bold;
    background: -webkit-linear-gradient(left, #012801, #006400, #012801);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.top {
    width: 100%;
    margin: 0 auto;
    /* background: linear-gradient(to bottom, #bcf6c6 0%, #D7F6DC 5%, #ffffff 95%, #CEECCE 100%); */
    background: linear-gradient(to bottom, #75b3eae1 0%, #cbe0f2e1 50%, #ffffff 95%, #CEECCE 100%);
}
</style>
